<template>
	<view class="container">
		<!-- 活动卡片 -->
		<view class="activity-card" @click="navigateToActivity">
			<view class="activity-content">
				<view class="activity-title">游戏策划征集计划</view>
				<view class="activity-subtitle">100万奖金等你来拿！</view>
			</view>
			<text class="activity-arrow">→</text>
		</view>
		
		<!-- 讨论区 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">讨论区</text>
				<text class="section-more">查看更多 ></text>
			</view>
			<view class="grid-container">
				<view class="grid-item" 
					  v-for="(game, index) in popularGames" 
					  :key="index" 
					  :style="{ backgroundImage: `url(${game.background})` }"
					  @click="navigateToDiscussion(game)">
					<view class="grid-content">
						<text class="grid-title">{{game.name}}</text>
						<text class="info-tag">{{game.playerCount}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 玩家交流区 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">玩家交流</text>
				<text class="section-more">更多 ></text>
			</view>
			<view class="feature-list">
				<view class="feature-item" @click="navigateToTeam">
					<view class="feature-icon">👥</view>
					<view class="feature-content">
						<text class="feature-title">组队交友</text>
						<text class="feature-count">2.3万在线</text>
					</view>
				</view>
				<view class="feature-item" @click="navigateToGuide">
					<view class="feature-icon">📖</view>
					<view class="feature-content">
						<text class="feature-title">攻略分享</text>
						<text class="feature-count">1.8万帖子</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容创作 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">内容创作</text>
				<text class="section-more">全部 ></text>
			</view>
			<view class="content-grid">
				<view class="content-item" @click="navigateToVideo">
					<view class="content-icon">🎬</view>
					<text class="content-title">视频分享</text>
				</view>
				<view class="content-item" @click="navigateToScreenshot">
					<view class="content-icon">📸</view>
					<text class="content-title">游戏截图</text>
				</view>
				<view class="content-item" @click="navigateToArticle">
					<view class="content-icon">📝</view>
					<text class="content-title">专栏文章</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { games } from '../../utils/gameData.js';
export default {
	data() {
		return {
			popularGames: games.slice(0, 4).map(game => ({
				id: game.game_id,
				name: game.game_name,
				playerCount: '10万+在线',
				background: game.game_banner
			}))
		}
	},
	methods: {
		navigateToActivity() {
			uni.navigateTo({
				url: '/pages/community/activity'
			});
		},
		navigateToDiscussion(game) {
			uni.navigateTo({
				url: `/pages/community/discussion?gameId=${game.id}`
			});
		},
		navigateToTeam() {
			uni.navigateTo({
				url: '/pages/community/team/team'
			});
		},
		navigateToGuide() {
			uni.navigateTo({
				url: '/pages/community/guide/guide'
			});
		},
		navigateToVideo() {
			uni.navigateTo({
				url: '/pages/community/content/video'
			});
		},
		navigateToScreenshot() {
			uni.navigateTo({
				url: '/pages/community/content/screenshot'
			});
		},
		navigateToArticle() {
			uni.navigateTo({
				url: '/pages/community/content/article'
			});
		}
	}
}
</script>
<style>
.container {
	padding: 15px;
	background: #1E1E2E;
	min-height: 100vh;
}
.activity-card {
	background: #4D4C6D;
	border-radius: 20px;
	padding: 20px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
	border: 1px solid #6E6C89;
}
.activity-card:active {
	transform: scale(0.98);
}
.activity-content {
	flex: 1;
}
.activity-title {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 4px;
	text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.activity-subtitle {
	color: rgba(255,255,255,0.9);
	font-size: 14px;
}
.activity-arrow {
	color: white;
	font-size: 20px;
	font-weight: bold;
}
.section {
	background: #2D2D44;
	border-radius: 20px;
	padding: 15px;
	margin-bottom: 20px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	border: 1px solid #6E6C89;
}
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}
.section-title {
	color: #9796B8;
	font-size: 18px;
	font-weight: bold;
	text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.section-more {
	color: #6E6C89;
	font-size: 14px;
}
.grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.grid-item {
	background-size: cover;
	background-position: center;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	height: 140px;
	transition: transform 0.15s ease;
}
.grid-item:active {
	transform: scale(0.98);
}
.grid-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
	z-index: 1;
}
.grid-content {
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 10px;
	z-index: 2;
}
.grid-title {
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
	display: block;
}
.info-tag {
	background: rgba(255,255,255,0.2);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 10px;
	display: inline-block;
}
.feature-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.feature-item {
	background: #4D4C6D;
	border-radius: 15px;
	padding: 15px;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: transform 0.15s ease;
	border: 1px solid #6E6C89;
}
.feature-item:active {
	transform: scale(0.98);
}
.feature-icon {
	font-size: 24px;
	width: 45px;
	height: 45px;
	background: #2D2D44;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.feature-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.feature-title {
	color: #9796B8;
	font-size: 15px;
	font-weight: bold;
}
.feature-count {
	color: #6E6C89;
	font-size: 12px;
}
.content-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.content-item {
	background: #4D4C6D;
	border-radius: 15px;
	padding: 12px;
	text-align: center;
	transition: transform 0.15s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	border: 1px solid #6E6C89;
}
.content-item:active {
	transform: scale(0.95);
}
.content-icon {
	font-size: 24px;
}
.content-title {
	color: #9796B8;
	font-size: 13px;
}
</style>
